<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .box1 {
            height: 40px;
            width: 100vw;
            background-color: #333333;
        }

        .box2 {
            height: 40px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .box3 ul {
            height: 100%;
            width: 600px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .box3 ul li {
           color: #999999;
           font-size: 12px;
        }

        .box3 ul li:not(:last-child):after {
            content: "丨";
        }
        .box5{
            height: 100%;
            width: 110px;
            font-size: 14px;
            line-height: 40px;
            color: #999999;
        }
        .box6{
            height: 100%;
            width: 90px;
            font-size: 14px;
            line-height: 40px;
            color: #999999;
        }
        .box4{
            height: 100%;
            width: 200px;
            display: flex;
            }
            .box7{
                width: 1200px;
                height: 100px;
                margin: 0 auto;
                /* border: 1px solid  red; */
                display: flex;
                align-items: center;
            }
            .box8{
                width: 50px;
                height: 50px;
                }
                .box9{
                    height: 100px;
                    width: 600px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-left: 200px;
                }
                .box10{
                    width: 250px;
                    height: 40px;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
                    margin-left: 200px;
                    box-sizing: border-box;
                    display: flex;
                }
                .box11{
                    width: 200px;
                    height: 40px;
                    /* border: 1px solid blue; */
                }
                .box12{
                    width: 50px;
                    height: 40px;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
                }
                .box12 img{
                    width: 100%;
                    height: 100%;
                }
                .box13{
                    width: 1200px;
                    height: 450px;
                    margin: 0 auto;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
                    display: flex;
                }
                .box14{
                    width: 250px;
                    height: 100%;
                    border: 1px red solid;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: #2e0c00;
                 }
                 .box14 li{
                     width: 250px;
                     height: 40px;
                     display: flex;
                     justify-content: space-between;
                     padding: 0 25px ;
                     box-sizing: border-box;
                     color: white;
                     padding-top: 10px;
                     box-sizing: border-box;
                 }
                 .box14 li p{
                    font-size: 12px;
                 }
                 .box15 {
                    width: 950px;
                    height: 450px;
                    box-sizing: border-box;
                  }
                  .box15 img{
                      width: 950px;
                      height: 450px;
                  }
                  .box16{
                      width: 1200px;
                      height: 150px;
                      box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
                      margin: 0 auto;
                      margin-top: 20px;
                      display: flex;
                      justify-content: space-between;
                  }
                  .box17{
                      width: 250px;
                      height: 150px;
                      display: flex;
                      /* border: 1px solid red; */
                    }
                    .box18{
                        display: flex;
                        flex-wrap: wrap;
                        font-size: 12px;
                        background-color: #605750;
                    }
                   
                    .box19{
                        border-right: 1px solid #999;
                        border-bottom: 1px solid #999;
                    }
                    .box20{
                        border-right: 1px solid #999;
                        border-bottom: 1px solid #999;
                        border-left: 1px solid #999;
                    }
                    .box21{
                        
                        border-bottom: 1px solid #999;
                        border-left: 1px solid #999;
                    }
                    .box22{
                        border-right: 1px solid #999;
                        border-top: 1px solid #999;
                    }
                    .box23{
                        border-right: 1px solid #999;
                        border-top: 1px solid #999;
                        border-left: 1px solid #999;
                    }
                    .box24{
                        border-top: 1px solid #999;
                        border-left: 1px solid #999;
                    }
                    .box18 li {
                        width: 70px;
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-right: 10px;
                        color: white;
                        font-size: 12px;
                    }
                    .box25{
                        width: 300px;
                        height: 150px;
                        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
                     }
                     .box25 img {
                         width: 300px ;
                         height: 150px;
                     }
                     .box26{
                         width: 1200px;
                         margin: 0 auto;
                         height: 40px;
                         /* box-shadow: 0 2px 10px rgba(0, 0, 0, .15); */
                         margin-top: 20px;
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
                     }
                    
                     .box28{
                         width: 100px;
                         height: 20px;
                         /* box-shadow: 0 2px 10px rgba(0, 0, 0, .15); */
                         display: flex;
                         border: 1px solid #999999;
                     }
                     .box29{
                         width: 50px;
                         height: 20px;
                         display: flex;
                         align-items: center;
                         
                     }
                     .box30{
                         width: 50px;
                         height: 20px;
                         border-left: 1px solid #999999;
                         display: flex;
                         align-items: center;
                     }
                     .box29 p {
                         margin: 0 auto;
                     }
                     .box30 p {
                         margin: 0 auto;
                     }
                     .box31{
                         width: 1200px;
                         height: 300px;
                         /* border: 1px solid red; */
                         margin: 0 auto;
                         display: flex;
                         justify-content: space-between;
                     }
                     .box31 li{
                         width: 220px;
                         height: 300px;
                         background-color: #fafafa;
                         display: flex;
                         justify-content: space-between;
                         flex-direction: column;
                         padding-top: 20px;
                         box-sizing: border-box;
                         border-top: 2px solid #fc6a00;
                     }
                     .box32 p{
                         font-size: 12px;
                     }
                     .box32 span {
                         font-size: 8px;
                         color: #999999;
                       }
                     .box32{
                         
                         text-align: center;
                     }
                     .box32 img {
                         width: 80%;
                         height: 80%;
                     }
                     .box33{
                         width: 100vw;
                         height: 550px;
                         background-color: #fafafa;
                         margin-top: 50px;
                     }
                     .box34{
                         width: 1200px;
                         height: 600px;
                         /* border: 1px red solid; */
                         margin: 0 auto;
                     }
                     .box35{
                         margin: 20px 0;

                     }
                     .box36{
                         width: 1200px;
                         height: 530px;
                         /* border: 1px blue solid; */
                        display: flex;
                        justify-content: space-between; 
                     }
                     .box37 img{
                         width: 250px;
                         height: 505px;
                     }
                     .box37 {
                         width: 250px;
                         height: 530px;
                     }
                     .box38{
                        width: 950px;
                        height: 530px;
                        /* border: 1px solid yellow; */
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                     }
            .box38 li {
                width: 210px;
                height: 240px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                background-color: white;
                margin: 0 12px;
            }
            .box39{
                margin: 0 auto;
                text-align: center;
            }
            .box39 p{
                font-size: 12px;
            }
            .box39 h6{
                color: #999999;
                font-weight: 300;
            }
            .box39 span{
                color: tomato;
                font-size: 12px;
            }
            .box40{
                width: 1200px;
                height: 100px;
                border-bottom: 1px solid #999999;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: #999999;
                font-size: 14px;
            }
            .box40 li:not(:last-child):after{
                content: "丨";
            }
            .box41{
                width: 1200px;
                height: 200px;
                /* border: 1px solid red; */
                margin: 0 auto;
                display: flex;
            }
            .box42{
                width: 100px;
                height: 160px;
                display: flex;
                flex-direction: column;
                margin-top: 38px;
            }
            .box44{
                width: 900px;
                height: 200px;
                display: flex;
                justify-content: space-around;
            }
            .box42 li {
                font-size: 12px;
                color: #999999;
                margin-bottom: 10px;
            }
            .box43{
                font-size: 14px;
                color: black;
            }
            .box45{
                width: 300px;
                height: 200px;
                /* border: blue 1px solid; */
            }
            .box46{
                width:200px;
                height: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 50px;
                border-left: 1px solid #999;
            }
            .box46 span {
                font-size: 20px;
                color: coral;
            }
            .box47{
                width: 140px;
                height: 30px;
                border: coral 1px solid;
                line-height: 30px;
                text-align: center;
                color: coral;
                margin-top: 10px;
            }
            .box48{
                width: 100vw;
                height: 100px;
                background-color: #fafafa;
            }
            .box49{
                width: 1200px;
                height: 100px;
                /* border: 1px black solid; */
                margin: 0 auto;
                display: flex;
                align-items: center;
            }
            .box50{
                background-image: url(./学生用资源/image/mi-logo.png);
                background-color: coral;
                width: 40px;
                height: 40px;
                background-size: cover;
            }
            .box49 span{
                font-size: 12px;
                color: #999999;
            }
                     
                     
                
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <ul>
                    <li>
                        大米网
                    </li>
                    <li>
                        MIUI
                    </li>
                    <li>
                        米聊
                    </li>
                    <li>
                        游戏
                    </li>
                    <li>
                        多看阅读
                    </li>
                    <li>
                        云服务
                    </li>
                    <li>
                        大米移动版
                    </li>
                    <li>
                        问题反馈
                    </li>
                    <li>
                        Select Region
                    </li>
                </ul>
            </div>
            <div class="box4">
                <div class="box5">
                    登录丨注册
                </div>
                <div class="box6">
                    购物车（ 0 ）
                </div>
                
            </div>
        </div>
        <div class="box7">
            <div class="box8">
                <img src="./学生用资源/image/xiaomi_logo.png" alt="">
            </div>
            <ul class="box9">
                <li>
                    大米手机
                </li>
                <li>
                    红米
                </li>
                <li>
                    平板
                </li>
                <li>
                    电视
                </li>
                <li>
                    盒子
                </li>
                <li>
                    路由器
                </li>
                <li>
                    智能硬件
                </li>
                <li>
                    服务
                </li>
                <li>
                    社区
                </li>
            </ul>
            <div class="box10">
                <div class="box11">

                </div>
                <div class="box12">
                    <img src="./学生用资源/image/go.png" alt="">
                </div>
            </div>
        </div>
        <div class="box13">
            <ul  class="box14">
                <li>
                    <p>手机  平板 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>电视  盒子 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>路由器  智能配件 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>移动电源  插线板  </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>耳机  音箱 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>电池  存储卡 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>保护套  后盖 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>贴膜  其它配件  </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>米兔  服装 </p>  
                    <span>&gt;</span>
                </li>
                <li>
                    <p>背包  其它周边 </p>  
                    <span>&gt;</span>
                </li>
            </ul>
            <div class="box15">
                <img src="./学生用资源/image/xiaomi300.jpg" alt="">
            </div>
        </div>
        <ul class="box16">
            
                <li class="box17">
                    <ul class="box18">
                        <li class="box19">
                            <p>START</p>
                            <span>开放购买</span>
                        </li>
                        <li class="box20"> 
                            <p>GROUND</p>
                            <span>企业团购</span>
                        </li>
                        <li class="box21">
                            <p>RETROFIT</p>
                            <span>官方产品</span>
                        </li>
                        <li class="box22">
                            <p>CHANNEL </p>
                            <span> F码通道</span>
                        </li>
                        <li class="box23">
                            <p>RECHARGE </p>
                            <span>话费充值</span>
                        </li>
                        <li class="box24">
                            <p>SECURITY </p>
                            <span> 防伪检查</span>
                        </li>
                    </ul>
                </li>
                <li class="box25">
                    <img src="./学生用资源/image/dage1.jpg" alt="">
                </li>
                <li class="box25">
                    <img src="./学生用资源/image/dage2.jpg" alt="">
                </li>
                <li class="box25">
                    <img src="./学生用资源/image/dage3.jpg" alt="">
                </li>
            
        </ul>
        <div class="box26">
            <div class="box27">
                大米明星单品
            </div>
            <div class="box28">
                <div class="box29">
                   <p> &lt;</p>
                </div>
                <div class="box30">
                   <p> &gt;</p>
                </div>
            </div>
        </div>
        <ul class="box31">
            <li>
                <div class="box32">
                <img src="./学生用资源/image/dada1.jpg" alt="">
                <p>大米电视2/2S 全系列</p>
                <span>40/48/49/55英寸 现货购买</span>
                </div>
            </li>
            <li>
                <div class="box32">
                    <img src="./学生用资源/image/dada2.jpg" alt="">
                    <p>大米平板 </p>
                    <span> 全球首款 NVIDIA Tegra K1 平板</span>
                    </div>
            </li>
            <li>
                <div class="box32">
                    <img src="./学生用资源/image/dada5.jpg" alt="" >
                    <p>大米盒子增强版 </p>
                    <span>1G  首款4K超高清网络机顶盒</span>
                    </div>
            </li>
            <li>
                <div class="box32">
                    <img src="./学生用资源/image/dada4.jpg" alt="">
                    <p>全新大米路由器 
                    </p>
                    <span> 顶配路由器，企业级性能</span>
                    </div>
            </li>
            <li>
                <div class="box32">
                    <img src="./学生用资源/image/dada5.jpg" alt="">
                    <p>大米头戴式耳机  </p>
                    <span>媲美主流千元级头戴耳机</span>
                    </div>
            </li>
        </ul>
        <div class="box33">
            <div class="box34">
                <div class="box35">
                    智能硬件
                </div>
                <div class="box36">
                    <div class="box37">
                        <img src="./学生用资源/image/dadada1.jpg" alt="">
                    </div>
                    
                        <ul class="box38">
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada2.jpg" alt="">
                                    <p>大米智能家庭套装   </p>
                                    <h6>3分钟快速安装，30多种智能玩法</h6>
                                    <span> 199元</span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada3.jpg" alt="">
                                    <p>大米随身WIFI 8GB U盘版     </p>
                                    <h6>随身上网神器，内置8GB U盘</h6>
                                    <span>  49.9元</span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada4.jpg" alt="">
                                    <p>小蚁智能摄像机     </p>
                                    <h6>能看能听能说，手机远程观看</h6>
                                    <span> 149元 </span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada5.jpg" alt="">
                                    <p>大米体重称      </p>
                                    <h6>高精度压力传感器 ｜ 手机管理全家健康</h6>
                                    <span> 99元</span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada6.jpg" alt="">
                                    <p>小蚁运动机       </p>
                                    <h6>边玩边录边拍，手机随时分享</h6>
                                    <span>399元</span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada7.jpg" alt="">
                                    <p>大米路由器 mini      </p>
                                    <h6>主流双频AC智能路由器，性价比之王</h6>
                                    <span> 129元 </span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada8.jpg" alt="">
                                    <p>大米智能插座     </p>
                                    <h6>手机远程遥控开关，带USB接口</h6>
                                    <span> 59元</span>
                                </div>
                            </li>
                            <li>
                                <div class="box39">
                                    <img src="./学生用资源/image/dadada9.jpg" alt="">
                                    <p>大米水质TDS检测笔     </p>
                                    <h6>准确检测家中水质纯度</h6>
                                    <span> 39元</span>
                                </div>
                            </li>
                        </ul>
                    
                </div>
            </div>
        </div>
        
         <ul class="box40">
                <li>
                    1小时快修服务
                </li>
                <li>
                    7天无理由退货
                </li>
                <li>
                    15天免费换货
                </li>
                <li>
                    满150元包邮
                </li>
                <li >
                    520余家售后网点
                </li>
            </ul>
           <div class="box41">
               
               <div class="box44">
             <ul class="box42">
                 <li class="box43" style="color: black; font-size: 14px; padding-bottom: 15px;">
                    帮助中心 
                 </li>
                 <li>购物指南 </li>
                 <li>支付方式 </li>
                 <li>配送方式</li>
             </ul>
             <ul class="box42">
                <li class="box43" style="color: black; font-size: 14px; padding-bottom: 15px;">
                    服务支持      

                </li>
                <li>售后政策 </li>
                <li>自助服务 </li>
                <li>相关下载</li>
            </ul>
            <ul class="box42">
                <li class="box43" style="color: black; font-size: 14px; padding-bottom: 15px;">
                    大米之家     
                </li>
                <li>大米之家 </li>
                <li>服务网点 </li>
                <li>预约亲临到店服务 </li>
            </ul>
            <ul class="box42">
                <li class="box43" style="color: black; font-size: 14px; padding-bottom: 15px;">
                    关注我们     
                </li>
                <li>新浪微博 </li>
                <li>大米部落  </li>
                <li>官方微信</li>
            </ul>
        
           </div>
           <div class="box45">
            <div class="box46">
                <span>400-100-5678     </span>
                <p> 周一至周日 8:00-18:00</p>
                <p>（仅收市话费）</p>
                <div class="box47">24小时在线客服</div>
            </div>
           </div>
        
    </div>
    <div class="box48">
        <div class="box49">
            <div class="box50">
                
            </div>
            <span>大米网|MIUI|米聊|多看书城|大米路由器|大米后院|大米天猫店|大米淘宝直营店|大米网盟|问题反馈|Select Region 5555555号
            </span>
        </div>
    </div>
</body>

</html>